<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <!-- src指资源位置，width和height指宽高，controls指播放控制，autoplay指自动播放，loop指循环播放，muted指关闭静音 -->
    <video src="./static/mp4.mp4" width="200" controls autoplay loop muted></video>
    
    <!-- poster指封面地址，若设置autoplay则看不到poster的效果 -->
    <video src="./static/mp4.mp4" width="200" controls poster="./static/title.png"></video>
    
    <!-- source指向不同的视频文件，浏览器会选择兼容的格式播放 -->
    <video width="200" controls>
      <source type="video/mp4" src="./static/mp4.mp4">
      <source type="video/webm" src="./static/webm.webm">
    </video>
    
    <!-- 重新播放 -->
    <video id="replay" src="./static/mp4.mp4" height="300px" controls></video>
    <input type="button" value="重新播放" onclick="replay()">
    
    <!-- 音轨增删 -->
    <video id="track" src="./static/mp4.mp4" height="300px" controls></video>
    <input type="button" value="音轨增删" onclick="track()">
    
    <!-- 显示音轨 -->
    <video width="200" controls>
      <source type="video/mp4" src="./static/mp4.mp4">
      <source type="video/webm" src="./static/webm.webm">
      <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
    </video>
  </body>
  
  <script>
    function replay() {
      const videoDom = document.getElementById('replay');
      videoDom.load();
    }
    
    function track() {
      const videoDom = document.getElementById('track');
      videoDom.audioTracks.onaddtrack = (event) => {
        // 音轨增删事件
      };
    }
  </script>
</html>